---
type: tutorial
title: Layouts kombinieren, um das Beste aus beiden Welten zu erhalten
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Füge dein grundlegendes Seiten-Layout dem Layout hinzu, das deine Blog-Beiträge formatiert
i18nReady: true
---

import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Jetzt, da du jedem Blog-Beitrag ein Layout hinzugefügt hast, ist es Zeit, dass deine Beiträge wie der Rest der Seiten auf deiner Website aussehen!

<PreCheck>
  - dein Blog-Beitrags-Layout in deinem Hauptseiten-Layout zu verschachteln
</PreCheck>

## Verschachtle deine beiden Layouts

Du hast bereits ein `BaseLayout.astro`, um das grundlegende Layout deiner Seiten zu definieren.  

`MarkdownPostLayout.astro` bietet zusätzliche Templates für allgemeine Blog-Beitrags-Eigenschaften wie `title` und `date`, aber deine Blog-Beiträge sehen noch nicht wie die anderen Seiten deiner Website aus. Du kannst das Erscheinungsbild deiner Blog-Beiträge an den Rest der Website anpassen, indem du **Layouts verschachtelst**.

<Steps>
1. Importiere in `src/layouts/MarkdownPostLayout.astro` `BaseLayout.astro` und nutze es, um den gesamten Template-Inhalt zu umschließen. Vergiss nicht, das Prop `pageTitle` zu übergeben:

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,13}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Geschrieben von: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

2. In `src/layouts/MarkdownPostLayout.astro` kannst du nun das `<meta>`-Tag entfernen, da es bereits in deinem `BaseLayout` enthalten ist:

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={6}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Geschrieben von: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

3. Prüfe die Vorschau im Browser unter `http://localhost:4321/posts/post-1`. Jetzt solltest du Inhalte sehen, die gerendert werden durch:

    - Dein **Hauptseiten-Layout**, inklusive Styles, Navigationslinks und Social-Footer.
    - Dein **Blog-Beitrags-Layout**, inklusive Frontmatter-Eigenschaften wie Beschreibung, Datum, Titel und Bild.
    - Den **einzelnen Markdown-Inhalt des Blog-Beitrags**, also nur den Text, der in diesem Beitrag geschrieben wurde.

4. Beachte, dass der Seitentitel nun zweimal angezeigt wird, einmal durch jedes Layout.

    Entferne die Zeile, die den Seitentitel in `MarkdownPostLayout.astro` anzeigt:

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={2}
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Geschrieben von: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

5. Prüfe erneut die Vorschau im Browser unter `http://localhost:4321/posts/post-1` und vergewissere dich, dass diese Zeile nicht mehr angezeigt wird und der Titel nur einmal erscheint. Nimm weitere Anpassungen vor, um doppelte Inhalte zu vermeiden.
</Steps>

Achte darauf:

- Jeder Blog-Beitrag zeigt dieselbe Seitenschablone, und keine Inhalte fehlen. (Wenn bei einem Blog-Beitrag Inhalte fehlen, prüfe seine Frontmatter-Eigenschaften.)
- Keine Inhalte werden doppelt angezeigt. (Wenn etwas zweimal gerendert wird, entferne es aus `MarkdownPostLayout.astro`.)

Wenn du möchtest, kannst du dein Seitentemplate weiter anpassen.

<Box icon="question-mark">

### Teste dein Wissen

1. Welche der folgenden Eigenschaften erlaubt es, ein Layout in ein anderes zu verschachteln und modular mit Astro zu arbeiten?

    <MultipleChoice>
      <Option>
        kontinuierliche Bereitstellung
      </Option>
      <Option>
        responsives Design
      </Option>
      <Option isCorrect>
        komponentenbasiertes Design
      </Option>
    </MultipleChoice>

2. Mehrere Layouts sind besonders nützlich für Projekte, die Markdown-Seiten enthalten, wie z. B. ein …

    <MultipleChoice>
      <Option isCorrect>
        Blog
      </Option>
      <Option>
        Dashboard
      </Option>
      <Option>
        Chat-App
      </Option>
    </MultipleChoice>

3. Welches dieser Layouts liefert die Templates für alle deine Seiten?

    <MultipleChoice>
      <Option>
        `index.astro`
      </Option>
      <Option isCorrect>
        `BaseLayout.astro`
      </Option>
      <Option>
        `post-1.md`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Checkliste

<Checklist>
- [ ] Ich kann Layouts verschachteln und auf doppelte Elemente prüfen.
</Checklist>
</Box>

### Ressourcen

- [Layouts verschachteln in Astro](/de/basics/layouts/#verschachtelte-layouts)
